<template>
  <div class="box">
    <div class="header-with-back">
      <div class="back-nav" @click="goToIndex">
        <van-icon name="arrow-left" />
        <span style="font-size: 1.2rem">资源共享</span>
      </div>
    </div>
  </div>

  <!-- 主要内容区域 -->
  <div class="content">
    <div class="img-container">


      <!-- 视频信息卡片 -->
      <van-cell-group inset class="video-info">
        <video width="100%" height="auto" controls class="main-img">
        <source src="#" type="video/mp4">
        您的浏览器不支持视频标签。
      </video>
        <van-cell>
          <template #title>
            <h2 class="video-title">视频主题</h2>
          </template>
        </van-cell>

        <van-cell title="上传人" value="某某某" />

<!--        &lt;!&ndash; 数据统计 &ndash;&gt;-->
<!--        <van-cell>-->
<!--          <template #value>-->
<!--            <div class="stats">-->
<!--              <van-button size="small" icon="good-job-o">375</van-button>-->
<!--              <van-button size="small" icon="delete-o">470</van-button>-->
<!--              <van-button size="small" icon="eye-o">1106</van-button>-->
<!--            </div>-->
<!--          </template>-->
<!--        </van-cell>-->

        <van-cell title="简介" label="《肿瘤科》2018年第28讲（总第240讲）放疗在NSCLC综合治疗中的现状问题" />
      </van-cell-group>

      <!-- 评论区域 -->
      <van-cell-group inset class="comments">
        <van-cell title="评论" :border="false" />

        <van-cell v-for="(comment, index) in comments" :key="index" :border="false">
          <template #icon>
            <van-image
                round
                width="40"
                height="40"
                :src="comment.avatar"
                :alt="comment.name"
            />
          </template>
          <template #title>
            <div class="comment-content">
              <strong>{{ comment.name }}</strong>
              <p>{{ comment.content }}</p>
              <span class="comment-time">{{ comment.time }} · 回复</span>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup name="VideoView" lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";

const router = useRouter();

// 评论数据
const comments = ref([
  {
    name: '张三',
    content: '你好',
    time: '2025年1月1日',
    avatar: '#'
  },
  {
    name: '李四',
    content: '你好',
    time: '2025年1月1日',
    avatar: '#'
  },
  {
    name: '王五',
    content: '你好',
    time: '2025年1月1日',
    avatar: '#'
  }
]);

// 返回到首页
function goToIndex() {
  router.push('/cqust/index');
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

/*顶部盒子*/
.box {
  min-height: 9%;
  min-width: 100%;
  position: fixed;
  z-index: 999;
  background-color: white;
}

.back-nav {
  position: fixed;
  left: 1%;
  top: 1.25%;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: rgb(83, 30, 88);
  padding: 0.5rem;
  z-index: 10;
  font-size: 0.9rem;
}

/*大盒表单样式*/
.header-with-back {
  display: flex;
  flex-direction: column;
  margin-bottom: 2%;
  position: relative;
  background-color: white;
}

/*返回符号*/
.header-with-back .van-icon {
  position: static;
  font-size: 1.35rem;
}

/*顶部盒子*/
.div-top {
  width: 100%;
  position: fixed;
}

.content {
  padding-top: 18%;
  background-color: #f7f8fa;
  min-height: 100vh;
}

.img-container {
  padding: 16px 0;
}

.main-img {
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-info {
  margin-bottom: 16px;
}

.video-title {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #323233;
}

.stats {
  display: flex;
  gap: 12px;
}

.stats .van-button {
  border-radius: 20px;
  color: #666;
}

.comments {
  margin-top: 16px;
}

.comment-content {
  padding-left: 12px;
}

.comment-content strong {
  font-size: 14px;
  color: #323233;
}

.comment-content p {
  margin: 4px 0;
  color: #666;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

:deep(.van-cell-group--inset) {
  margin: 0 16px;
}

:deep(.van-cell) {
  padding: 16px;
}

:deep(.van-nav-bar) {
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
}

:deep(.van-nav-bar__title) {
  color: #323233;
  font-weight: bold;
}
</style>
